@charset "UTF-8";


//1、布局类------------------------------------------------------------------------------------------------------------------
/*
 flex layout.
 supported browsers,IE10+,firefox39+,chrome31+,safari8+,opera32+,all modern browsers.
 弹性布局，只适用于现在浏览器，IE10+ firefox39+,chrome31+,safari8+,opera32以版本，
 IE9-以下浏览器，及移动端页面应该使用 浮动布局
*/


//水平布局，使子元素靠左对齐，用于父元素
.flex-h,
.flex-h-left{
  /* OLD - iOS 6-, Safari 3.1-6 */
  display: -webkit-box;
  /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-box;
  /* TWEENER - IE 10 */
  display: -ms-flexbox;
  /* NEW - Chrome */
  display: -webkit-flex;
  /* W3C */
  display: flex;
}

//水平布局，使子元素靠右对齐，用于父元素
.flex-h-right{
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -ms-flex-pack: end;
  -webkit-justify-content: flex-end;
  -moz-justify-content: flex-end;
  -ms-justify-content: flex-end;
  justify-content: flex-end;
}

//水平布局-使子元素两端对齐，子元素间自动会空出间距，用于父元素
//取消间距，需要给每个子元素设置伸缩属性，flex: 1; 使用子元素按比例进行自动填充；即 添加 flex-average
//也可将最后一个子元素宽设为100%,即width:100%，强制取消间距；
.flex-h-space{
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  -ms-justify-content: space-between;
  justify-content: space-between;
}


//水平布局-使子元素居中对齐，且没有间距，用于父元素
.flex-h-center{
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -ms-flex-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
}

//水平布局-使子元素相对于父元素，在垂直方向上居中对齐，用于父元素
//所有子元素都会相对于父元素垂直居中，有多个子元素时会从左到右排列；
.flex-h-mid{
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  align-items: center;
}



//垂直布局---子元素在水平方向上默认靠左，可以通过 text-align:center，使用其水平居中
//垂直布局，使子元素在垂直方向上靠上对齐，用于父元素；
.flex-v,
.flex-v-top{
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -ms-flex-direction:column;
  -webkit-flex-direction:column;
  -moz-flex-direction:column;
  flex-direction:column;

  -ms-flex-pack: start;
  -webkit-justify-content: flex-start;
  -moz-justify-content: flex-start;
  -ms-justify-content: flex-start;
  justify-content: flex-start;

}

//垂直布局，使子元素垂直方向上靠下对齐，用于父元素；
.flex-v-bottom{
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-direction:column;
  -webkit-flex-direction:column;
  -moz-flex-direction:column;
  flex-direction:column;

  -ms-flex-pack: end;
  -webkit-justify-content:flex-end;
  -moz-justify-content: flex-end;
  -ms-justify-content: flex-end;
  justify-content:flex-end;
}


//垂直布局，使子元素，垂直分布于父元素内，用于父元素；
//所有子元素都会垂直居中，有多个子元素时会从上到下排列，与 flex-h-mid的区别是子元素的上下/左右排列；
.flex-v-mid{
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -ms-flex-direction:column;
  -webkit-flex-direction:column;
  -moz-flex-direction:column;
  flex-direction:column;

  -ms-flex-pack: center;
  -webkit-justify-content:center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  justify-content:center;
}


//垂直布局-使子元素在垂直方向上两端对齐，子元素间自动会空出间距，用于父元素
//取消间距，需要给每个子元素设置伸缩属性，flex: 1; 使用子元素按比例进行自动填充； 即 添加 flex-average
.flex-v-space{
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -ms-flex-direction:column;
  -webkit-flex-direction:column;
  -moz-flex-direction:column;
  flex-direction:column;

  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  -ms-justify-content: space-between;
  justify-content: space-between;
}



//水平，垂直居中显示，如图片在很多地方都会用于的一个类-----------------------绝对居中
.flex-abs-mid{
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  align-items: center;

  -ms-flex-direction:column;
  -webkit-flex-direction:column;
  -moz-flex-direction:column;
  flex-direction:column;

  -ms-flex-pack: center;
  -webkit-justify-content:center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  justify-content:center;
}




//水平/垂直布局，设置子元素伸缩比例，用于子元素；
//使子元素平均分配宽度
.flex-average{
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -moz-box-flex: 1;
  -moz-flex: 1;
  -ms-flex: 1;
  flex: 1;
}


//水平/垂直布局，当子元素总宽超出父元素时，使子元素换行排列，用于父元素上
.flex-rows{
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  flex-wrap: wrap;
}


